<template>
  <div class="banner-block" style="z-index: 1">
    <!-- <BannerYandex></BannerYandex> -->
    <Banner1></Banner1>
    <Banner2></Banner2>
    <Banner3></Banner3>
  </div>
</template>

<script>
import BannerYandex from "./BannerYandex.vue";
import Banner1 from "./Banner1.vue";
import Banner2 from "./Banner2.vue";
import Banner3 from "./Banner3.vue";
export default {
  name: "BannerRow",
  setup() {
    return {};
  },
  components: {
    // BannerYandex,
    Banner1,
    Banner2,
    Banner3,
  },
};
</script>
<style scoped></style>
<style>
.banner-block {
  padding-top: 20px;
}
.banner {
  width: 340px;
  height: 150px;
  margin-top: 0;
  margin-bottom: 20px;
  margin-left: 0;
  margin-right: 20px;
  font-weight: 700;
  font-size: 20px;
  color: #ffffff;
  text-align: center;
}
@media screen and (max-width: 1250px) {
  .banner {
    width: 100%;
  }
  .banner-block {
    max-width: 820px;
    width: 100%;
    padding: 0 20px;
  }
}
@media (max-width: 400px) {
  .banner-block {
    padding: 0 5px;
  }
}
</style>
